<template>
  <div class="quality-score-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>简历质量评分</span>
        </div>
      </template>
      <div class="card-content">
        <!-- 输入区域 -->
        <div class="input-section">
          <el-form :model="queryForm" :inline="true">
            <el-form-item label="简历编号">
              <el-input v-model="queryForm.resumeNumber" placeholder="请输入简历编号" clearable></el-input>
            </el-form-item>
            <el-form-item label="用户ID">
              <el-input v-model="queryForm.userId" placeholder="请输入用户ID" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="calculateQuality" :loading="loading">计算评分</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 结果展示区域 -->
        <div v-if="scoreResult" class="result-section">
          <div class="total-score">
            <el-statistic title="总评分" :value="scoreResult.totalScore">
              <template #suffix>
                <span class="score-suffix">/100</span>
              </template>
            </el-statistic>
          </div>

          <el-divider content-position="center">详细评分</el-divider>

          <div class="detail-list">
            <el-collapse accordion>
              <el-collapse-item v-for="(category, index) in scoreResult.detailList" :key="index">
                <template #title>
                  <div class="category-header">
                    <span>{{ category.categoryDescription }}</span>
                    <span class="category-score">得分: {{ category.remainingScore }}</span>
                  </div>
                </template>
                <div v-for="(moduleGroup, groupIndex) in category.moduleGroupList" :key="groupIndex" class="module-group">
                  <div class="module-header">
                    <el-tag type="info">{{ moduleGroup.moduleRuleDescription }}</el-tag>
                    <span class="module-score">扣分: -{{ moduleGroup.score }}</span>
                  </div>
                  <el-table :data="moduleGroup.detailList" border stripe style="width: 100%; margin-top: 10px;">
                    <el-table-column prop="detailDesc" label="问题描述" min-width="200"></el-table-column>
                    <el-table-column prop="path" label="问题位置" min-width="180"></el-table-column>
                    <el-table-column prop="errorCode" label="错误代码" width="100"></el-table-column>
                    <el-table-column prop="category" label="类别" width="120"></el-table-column>
                    <el-table-column prop="subCategory" label="子类别" width="100"></el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

        <!-- 无数据提示 -->
        <el-empty v-if="!loading && !scoreResult" description="请输入简历编号和用户ID进行查询"></el-empty>

        <!-- 错误提示 -->
        <el-alert
          v-if="errorMessage"
          :title="errorMessage"
          type="error"
          show-icon
          :closable="true"
          @close="errorMessage = ''"
        ></el-alert>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { calculateQualityScore } from '@/api/resume'

interface QueryForm {
  resumeNumber: string
  userId: string
}

import { QualityScoreResult } from '@/api/resume'

const queryForm = reactive<QueryForm>({
  resumeNumber: '',
  userId: ''
})

const loading = ref(false)
const scoreResult = ref<QualityScoreResult | null>(null)
const errorMessage = ref('')

const calculateQuality = async () => {
  // 验证输入
  if (!queryForm.resumeNumber || !queryForm.userId) {
    errorMessage.value = '请输入简历编号和用户ID'
    return
  }

  loading.value = true
  errorMessage.value = ''
  
  try {
    const response = await calculateQualityScore({
      resumeNumber: queryForm.resumeNumber,
      userId: queryForm.userId
    })
    scoreResult.value = response.data
  } catch (error) {
    console.error('API请求错误:', error)
    errorMessage.value = '网络错误，请稍后重试'
    scoreResult.value = null
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.quality-score-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 20px 0;
}

.input-section {
  margin-bottom: 20px;
}

.result-section {
  margin-top: 30px;
}

.total-score {
  text-align: center;
  margin-bottom: 20px;
}

.score-suffix {
  font-size: 14px;
  color: #909399;
}

.detail-list {
  margin-top: 20px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.category-score {
  font-weight: bold;
  color: #409EFF;
}

.module-group {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.module-score {
  color: #F56C6C;
  font-weight: bold;
}
</style>